<template>
  <div class="class">
    <section class="search-content">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col :span="24">
          <el-input
            v-model="listQuery.title"
            placeholder="班级名称"
            style="width:220px;"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            v-model="listQuery.content"
            placeholder="评价内容"
            style="width:220px;"
            @keyup.enter.native="handleFilter"
          />
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button size="medium" type="info" @click="clearParams">清空</el-button>
        </el-col>
      </el-row>
    </section>
    <subtable
      :table-label="tableLabel"
      :table-data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
    >
      <el-table-column slot="first" type="selection" min-width="2"/>
      <el-table-column slot="second" label="评价内容" align="left" min-width="30">
        <template slot-scope="scope">
          <p style="margin:0;color:#8a8a8a;font-size:14px;">{{ scope.row.classRoomName }}</p>
          <p style="margin:0;color:#8a8a8a;font-size:14px;">{{ scope.row.title }}</p>
          <el-button type="text" class="contentBtn">
            <span>{{ scope.row.content }}</span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column slot="third" label="作者" align="center" min-width="20">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClickDialog(scope)">{{ scope.row.userId }}</el-button>
          <br/>
          <span style="color:#8a8a8a">{{ scope.row.createTimeTimeStr }}</span>
        </template>
      </el-table-column>
      <el-table-column slot="button" label="操作" align="center" min-width="10">
        <template slot-scope="scope">
          <el-button type="danger" @click="handleClickCancel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </subtable>
    <!-- 删除 -->
    <el-dialog :visible.sync="handleDelete" width="25%">
      <div style="width:100%;float:left;height:42px;">确定要删除吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteData(deleteRow)">确定</el-button>
        <el-button @click="handleDelete = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <user-dialog
      :visiabledialog="userdialog"
      :dialog-data="dialogData"
      @changeVisiable="userdialog = false"
    />
  </div>
</template>

<script>
  import UserDialog from '@/components/Dialog';
  import Subtable from '@/components/Eltable';
  import Pagination from '@/components/Pagination'; // 分页组件
  import {classroomReviewList, deleteClassroomReview} from "@/api/subject/classroom_review"; // 接口
  import {getEduxcloudUserById} from "@/api/user/user"; // 接口
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      Pagination,
      Subtable,
      UserDialog
    },
    data() {
      return {
        userdialog: false,
        evaluateDialog: false,
        dialogData: {},
        total: 2,
        currentpage: 1,
        pagesize: 10,
        listFilter: [],
        handleDelete: false,//删除
        deleteRow: '',
        listQuery: {
          title: '',
          content: ''
        },
        tableLabel: [
          {
            label: '评分',
            width: '10',
            prop: 'rating'
          }
        ],
        tableData: [],
        evaluateInfoForm: {}
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      handleClickDialog(scope) {
        this.dialogData = scope.row;
        this.userdialog = true;
      },
      handleClickCancel(row) {
        this.handleDelete = true;
        this.deleteRow = row;
      },
      handleSizeChange(val) {
        this.currentpage = 1;
        this.pagesize = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      // 改变当前页
      handleCurrentChange(val) {
        this.currentpage = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleFilter() {
        this.getData()
      },
      clearParams() {
        this.listQuery.title = '';
        this.listQuery.content = '';
        this.getData()
      },
      getData() {
        classroomReviewList(getTenantId(), this.listQuery.title, this.listQuery.content).then(response => {
          this.tableData = response.data.items;
          this.listFilter = response.data.items;
          this.total = response.data.items.length;
          this.tableData.map(item => {
            if (item.userId) {
              getEduxcloudUserById(item.userId).then(r => {
                item.userId = r.data.eduxcloudUser.name;
              });
            }
          })
        });
      },
      deleteData(row) {
        this.handleDelete = false;
        deleteClassroomReview(row.id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.getData();
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .class {
    margin-top: 0;
    // padding: 14px 20px 21px 20px;
    .search-content {
      width: 100%;
    }

    .contentBtn {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>
